<template>
  <div>
    <van-tabbar fixed route v-model="that.active" @change="handleChange">
      <van-tabbar-item v-for="(item, index) in props.data" :to="item.to" :key="index">
        <span>{{item.title}}</span>
        <template #icon="propse">
          <img :src="propse.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { defineProps, reactive, defineEmits } from 'vue';
let props = defineProps({
  defaultActive: {
    type: Number,
    default: 0
  },
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
})
let emit = defineEmits(['change'])
let that = reactive({
  active: props.defaultActive
})


let handleChange = (value) => {
  emit('change', value)
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.van-tabbar {
  width: 100%;
  height: 100px;
}

.van-tabbar-item {
  img {
    width: 45px;
    height: 45px;
  }

  span {
    font-size: 22px;
  }
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
